import React from 'react'
import {connect} from 'dva'
import { Row, Col, Button, Table, message, Modal} from 'antd'
import {Link} from 'dva/router'
import style from './index.css'
import AddRepairModal from './addRepair'
import RejectModal from './rejectModal';
const confirm = Modal.confirm;
class NotreatList extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            visible: false,
            isTure:false,
            dataId:''
        }
    }
    //选择页码
    changePage =(page,pageSize)=>{
        this.props.dispatch({
            type:'repairManage/queryNotreat',
            payload:{
                size: 10,
                start: page
            }
        })
    }
    //获取弹框的dom
    saveForm =(form)=>{
        this.form = form;
    }
    //新增报修
    addRepair =()=>{
        this.setState({
            visible: true
        })
    }

    //新增报修的确定
    handleOk =()=>{
        this.form.validateFields((err,values)=>{
            if(err){
                return
            }
            this.props.dispatch({
                type:'repairManage/addRepair',
                payload:values
            })
            this.setState({
                visible:false,
            })
            this.form.resetFields();
        })
    }
    //新增报修的取消
    handleCancel =()=>{
        this.setState({
            visible: false
        })
        this.form.resetFields();
    }

    //操作员同意
    handleAgree=(id)=>{
        const {dispatch} = this.props;
        confirm({
            title: '确定同意该报修？',
            content: '请谨慎处理！',
            okText: '确定',
            cancelText: '取消',
            onOk() {
                dispatch({
                    type:'repairManage/allowRepair',
                    payload: id
                })
            },
            onCancel() {
            },
        });
    }
    //操作员拒绝
    handleRefuse=(id)=>{
        this.setState({
            isTure:true,
            dataId:id
        })
    }
    //获取拒绝弹框dom
    rejectForm=(form)=>{
        this.form = form;
    }
    //操作员拒绝的确定
    handleOkReject=()=>{
        const {dataId} = this.state;
        this.form.validateFields((err,values)=>{
            if(err){
                return 
            }
            this.props.dispatch({
                type:'repairManage/rejectRepair',
                payload:{
                    id:dataId,
                    comment:values.comment
                }
            })
            this.setState({
                isTure:false,
                dataId:''
            })
            this.form.resetFields();
        })
    }
    //操作员拒绝的取消
    handleCancelReject=()=>{
        this.setState({
            dataId:'',
            isTure:false
        })
        this.form.resetFields();
    }
    
    render() {
        const code = sessionStorage.getItem('code');
        const { notreatList, allCount } = this.props.repairManage;
        const {visible,isTure} = this.state;
        const columns = 
            code == 1 ? [
            {
                title: '序号',
                key: 'orderBy',
                dataIndex: 'orderBy',
            }, {
                title:'报修名称',
                key: 'repairname',
                dataIndex: 'repairname',
            },{
                title: '创建时间',
                key: '2',
                dataIndex: 'cdate',
            },{
                title: '详情',
                key: '1',
                render: (text,record) =>
                    <Link to={`/chzu/notreatList/repairDetail/${record.rowguid}`} className={style.detail}>详情</Link>
            }
        ] : code == 2 ? [
                {
                    title: '序号',
                    key: 'orderBy',
                    dataIndex: 'orderBy',
                }, {
                    title: '报修名称',
                    key: 'repairname',
                    dataIndex: 'repairname',
                },{
                    title:'学生姓名',
                    key:'pname',
                    dataIndex: 'pname',
                }, {
                    title: '创建时间',
                    key: 'cdate',
                    dataIndex: 'cdate',
                },{
                    title:'操作',
                    key:'3',
                    render: (text,record) =>
                        <div>
                            <Button type='primary' className={style.operation} onClick={()=>{this.handleAgree(record.rowguid)}}>同意</Button>
                            <Button type='primary' className={style.operation} onClick={()=>{this.handleRefuse(record.rowguid)}}>拒绝</Button>
                        </div>
                },{
                    title: '详情',
                    key: '1',
                    render: (text, record) =>
                        <Link to={`/chzu/notreatList/repairDetail/${record.rowguid}`} className={style.detail}>详情</Link>
                },
        ] : ''
        
        
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    deleteId: selectedRows[0].rowguid
                })
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User',
                name: record.name,
            }),
        };
        return (
            <div className={style.content}>
                <Row>
                    <Col span={15} className={style.col}>
                        <span className={style.icon}>待报修列表</span>
                    </Col>
                    <Col span={3} className={style.col}>
                    </Col>
                    {
                        code == 1 ? 
                        <Col span={3} className={style.col}>
                            <Button className={style.Button} type="primary" onClick={this.addRepair}>新增报修</Button>
                        </Col> : 
                        <Col span={3}></Col>
                    }
                    <Col span={3} className={style.col}>
                    </Col>
                </Row>
                 <AddRepairModal
                    ref={this.saveForm}
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                />
                <RejectModal
                    ref={this.rejectForm}
                    isTure={isTure}
                    okReject={this.handleOkReject}
                    onCancelReject={this.handleCancelReject}
                />
                <Table
                    rowKey='id'
                    rowSelection={rowSelection}
                    columns={columns}
                    dataSource={notreatList}
                    pagination={{
                        total: allCount,
                        showTotal: total => `共有${allCount}条数据`,
                        onChange: this.changePage
                    }}
                />
               
            </div>
        )
    }
}
export default connect(({ repairManage }) => ({ repairManage}))(NotreatList)